<!DOCTYPE html>





<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 3.9.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=7.4.0">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=7.4.0">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=7.4.0">
  <link rel="mask-icon" href="/images/logo.svg?v=7.4.0" color="#222">

<link rel="stylesheet" href="/css/main.css?v=7.4.0">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css?v=4.7.0">
  <link rel="stylesheet" href="/lib/pace/pace-theme-center-simple.min.css?v=1.0.2">
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.4.0',
    exturl: false,
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false},
    copycode: {"enable":false,"show_result":false,"style":null},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":true},
    bookmark: {"enable":false,"color":"#222","save":"auto"},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: '',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    translation: {
      copy_button: '复制',
      copy_success: '复制成功',
      copy_failure: '复制失败'
    },
    sidebarPadding: 40
  };
</script>

  <meta name="description" content="工欲善其事，必先利其器，作为一个前端工程师，有个好用且适合自己的编辑器是很重要的，现在我将为大家介绍几款广受大家欢迎的前端编辑器。  Visual Studio Code  下载地址：https://code.visualstudio.com/ 功能介绍：微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Win">
<meta property="og:type" content="article">
<meta property="og:title" content="前端常用编辑器，你知道几款呢？">
<meta property="og:url" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/index.html">
<meta property="og:site_name" content="筱佳の博客">
<meta property="og:description" content="工欲善其事，必先利其器，作为一个前端工程师，有个好用且适合自己的编辑器是很重要的，现在我将为大家介绍几款广受大家欢迎的前端编辑器。  Visual Studio Code  下载地址：https://code.visualstudio.com/ 功能介绍：微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Win">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/vsc.webp">
<meta property="og:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/hbuilder.webp">
<meta property="og:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/sub.webp">
<meta property="og:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/webstorm.webp">
<meta property="og:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/atom.webp">
<meta property="og:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/dw.webp">
<meta property="og:updated_time" content="2019-09-18T12:59:55.920Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端常用编辑器，你知道几款呢？">
<meta name="twitter:description" content="工欲善其事，必先利其器，作为一个前端工程师，有个好用且适合自己的编辑器是很重要的，现在我将为大家介绍几款广受大家欢迎的前端编辑器。  Visual Studio Code  下载地址：https://code.visualstudio.com/ 功能介绍：微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Win">
<meta name="twitter:image" content="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/vsc.webp">
  <link rel="canonical" href="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>前端常用编辑器，你知道几款呢？ | 筱佳の博客</title>
  








  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">
  <div class="container use-motion">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">筱佳の博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <p class="site-subtitle">All you have to do is try to give the rest to God</p>
      
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
      
      
      
        
        <li class="menu-item menu-item-首页">
      
    
      
    

    <a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-关于">
      
    
      
    

    <a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i> <br>关于</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-标签">
      
    
      
    

    <a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-归档">
      
    
      
    

    <a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i> <br>归档</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-分类">
      
    
      
    

    <a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i> <br>分类</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-日历">
      
    
      
    

    <a href="/schedule/" rel="section"><i class="menu-item-icon fa fa-fw fa-calendar"></i> <br>日历</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
            

          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
      <article itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block post">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="筱佳">
      <meta itemprop="description" content="筱佳个人网站，主要涉及前端知识分享,实践教程，前沿技术等方面。">
      <meta itemprop="image" content="/images/autor.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="筱佳の博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">前端常用编辑器，你知道几款呢？

          
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              
                
              

              <time title="创建时间：2019-09-15 20:12:51" itemprop="dateCreated datePublished" datetime="2019-09-15T20:12:51+08:00">2019-09-15</time>
            </span>
          
            

            
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2019-09-18 20:59:55" itemprop="dateModified" datetime="2019-09-18T20:59:55+08:00">2019-09-18</time>
              </span>
            
          

          
            <span class="post-meta-item" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>
            </span>
          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <blockquote>
<p>工欲善其事，必先利其器，作为一个前端工程师，有个好用且适合自己的编辑器是很重要的，现在我将为大家介绍几款广受大家欢迎的前端编辑器。</p>
</blockquote><ul>
<li><p>Visual Studio Code </p>
<p>下载地址：<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">https://code.visualstudio.com/</a></p>
<p>功能介绍：微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。</p>
<p>Visual Studio Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。</p>
<p><img src="/2019/09/15/前端常用编辑器，你知道几款呢？/vsc.webp" alt></p>
</li>
<li><p>Hbulider</p>
<p>下载地址：<a href="http://www.dcloud.io/" target="_blank" rel="noopener">http://www.dcloud.io/</a></p>
<p>功能介绍：前端开发小白入门首选，hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端        工程师是一个不错的消息。</p>
</li>
</ul><a id="more"></a>

<p>优点是有强大的其他语言支持和开发webapp等功能，强大到没朋友。在语法提示、转到定义、重构、调试等方面都非常高效。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。</p>
<p><img src="/2019/09/15/前端常用编辑器，你知道几款呢？/hbuilder.webp" alt></p>
<ul>
<li>sublime text3</li>
</ul>
<p>下载地址：<a href="http://www.sublimetext.com/" target="_blank" rel="noopener">http://www.sublimetext.com/</a></p>
<p>功能介绍：sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。</p>
<p>sublime text3的优点的轻量级但是功能强大，优雅小巧启动速度快，有着丰富的第三方支持，能够满足各种各样的扩展缺点是对于项目的管理等不是很方便，但代码提示不如hubuilder强大。</p>
<p><img src="/2019/09/15/前端常用编辑器，你知道几款呢？/sub.webp" alt></p>
<ul>
<li>webstorm</li>
</ul>
<p>下载地址：<a href="https://www.jetbrains.com/webstorm/" target="_blank" rel="noopener">https://www.jetbrains.com/webstorm/</a></p>
<p>功能介绍：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。</p>
<p>目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。</p>
<p><img src="/2019/09/15/前端常用编辑器，你知道几款呢？/webstorm.webp" alt></p>
<ul>
<li>Atom</li>
</ul>
<p>下载地址：<a href="https://atom.io/" target="_blank" rel="noopener">https://atom.io/</a></p>
<p>功能介绍：Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。</p>
<p>具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。</p>
<p><img src="/2019/09/15/前端常用编辑器，你知道几款呢？/atom.webp" alt></p>
<ul>
<li>Dreamweaver</li>
</ul>
<p>下载地址：<a href="https://www.adobe.com/products/dreamweaver.html" target="_blank" rel="noopener">https://www.adobe.com/products/dreamweaver.html</a></p>
<p>功能介绍：老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。</p>
<p>好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。</p>
<p><img src="/2019/09/15/前端常用编辑器，你知道几款呢？/dw.webp" alt></p>

    </div>

    
    
    
        
      
        <div id="reward-container">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="reward-button" disable="enable" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
        
      
      <div style="display: inline-block">
        <img src="/images/wechatpay.jpg" alt="筱佳 微信支付">
        <p>微信支付</p>
      </div>
        
      
      <div style="display: inline-block">
        <img src="/images/alipay.jpg" alt="筱佳 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

      
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>筱佳</li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/" title="前端常用编辑器，你知道几款呢？">http://yoursite.com/2019/09/15/前端常用编辑器，你知道几款呢？/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fa fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！</li>
</ul>
</div>

      
      <footer class="post-footer">

        

          <div class="post-nav">
            <div class="post-nav-next post-nav-item">
              
                <a href="/2019/08/05/markdown文件的基本编写语法/" rel="next" title="markdown文件的基本编写语法">
                  <i class="fa fa-chevron-left"></i> markdown文件的基本编写语法
                </a>
              
            </div>

            <span class="post-nav-divider"></span>

            <div class="post-nav-prev post-nav-item">
              
            </div>
          </div>
        
      </footer>
    
  </div>
  
  
  
  </article>

  </div>


          </div>
          
    
    
  <div class="comments" id="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC80NjQ1Mi8yMjk2Mw=="></div>
  </div>
  
  

        </div>
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">
        
        
        
        
      

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image"
      src="/images/autor.png"
      alt="筱佳">
  <p class="site-author-name" itemprop="name">筱佳</p>
  <div class="site-description" itemprop="description">筱佳个人网站，主要涉及前端知识分享,实践教程，前沿技术等方面。</div>
</div>
  <nav class="site-state motion-element">
      <div class="site-state-item site-state-posts">
        
          <a href="/archives">
        
          <span class="site-state-item-count">3</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-categories">
        
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">分类</span>
        
      </div>
    
      
      
      <div class="site-state-item site-state-tags">
        
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">标签</span>
        
      </div>
    
  </nav>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://github.com/chenlongjia" title="GitHub &rarr; https://github.com/chenlongjia" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="mailto:1403353457@qq.com" title="E-Mail &rarr; mailto:1403353457@qq.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
    
  </div>
  <div class="cc-license motion-element" itemprop="license">
    
  
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://www.alloyteam.com" title="http://www.alloyteam.com" rel="noopener" target="_blank">Web前端导航</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://www.chuangzaoshi.com" title="http://www.chuangzaoshi.com" rel="noopener" target="_blank">创造狮导航</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://e.xitu.io" title="http://e.xitu.io" rel="noopener" target="_blank">掘金酱</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://www.v2ex.com" title="http://www.v2ex.com" rel="noopener" target="_blank">V2EX</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://www.ruanyifeng.com/home.html" title="http://www.ruanyifeng.com/home.html" rel="noopener" target="_blank">阮一峰个人网站</a>
        </li>
      
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 – <span itemprop="copyrightYear">2019</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">筱佳</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item-icon">
      <i class="fa fa-user"></i>
    </span>
    <span class="site-uv" title="总访客量">
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    </span>
  
    <span class="post-meta-divider">|</span>
  
    <span class="post-meta-item-icon">
      <i class="fa fa-eye"></i>
    </span>
    <span class="site-pv" title="总访问量">
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>
  
</div>












        
      </div>
    </footer>
  </div>

  


    
  
  <script color='0,0,255' opacity='0.5' zIndex='-1' count='299' src="/lib/canvas-nest/canvas-nest.min.js"></script>
  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
  <script src="/lib/anime.min.js?v=3.1.0"></script>
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script src="/js/utils.js?v=7.4.0"></script><script src="/js/motion.js?v=7.4.0"></script>
<script src="/js/schemes/pisces.js?v=7.4.0"></script>

<script src="/js/next-boot.js?v=7.4.0"></script>



  





















  

  

  

<script>
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
</script>

</body>
</html>
